<template>
  <div class="subject-container">
    <van-nav-bar class="page-nav-bar" title="专题" />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
    >
      <van-cell
        v-for="(obj, index) in list"
        :key="index"
        class="item"
        @click="todetail(obj.id)"
      >
        <van-image class="img" :src="obj.scene_pic_url"></van-image>
        <div class="title">{{ obj.title }}</div>
        <div class="subtitle">{{ obj.subtitle }}</div>
        <div class="price">{{ obj.price_info }}元起</div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { subject } from "@/api/subject"; // <====== 导入方法

export default {
  name: "subject",
  components: {},
  data() {
    return {
      list: [], // 专题列表数据
      loading: false, // 上拉加载更多的 loading 状态
      finished: false, // 是否加载结束
      error: false, // 是否加载失败
      dataj: {
        page: 1,
        size: 5,
      }, //发送的页码和页面数据
    };
  },
  methods: {
    todetail(id) {
      this.$router.push({
        path: "/subject/subdetail",
        query: {
          id: id,
        },
      });
    },
    // 当触发上拉加载更多的时候调用该函数
    async onLoad() {
      try {
        // 1. 请求获取数据
        const { data } = await subject(this.dataj);
        // 2. 把数据添加到 list 数组中(追加！！！)
        const results = data.data.data;
        this.list.push(...results);
        // 3. 设置本次加载中 loading 状态结束
        this.loading = false;
        // 4. 判断数据是否加载结束(处理页码)
        if (results.length) {
          this.dataj.page++;
        } else {
          // 没有数据了，设置加载状态结束，不再触发上拉加载更多了
          this.finished = true;
        }
      } catch (err) {
        console.log(err);
        this.loading = false; // 关闭 loading 效果
        this.error = true; // 开启错误提示}
      }
    },
  },
};
</script>
<style scoped lang="less">
.item {
  display: flex;
  flex-direction: column;
  .img {
    width: 100%;
    height: 400px;
  }
  .title {
    font-size: 36px;
    text-align: center;
  }
  .price {
    text-align: center;
    color: red;
  }
  .subtitle {
    font-size: 24px;
    text-align: center;
    height: 100px;
    color: #666;
  }
}
</style>